<template>
    <div>
        <template v-if="item.tip||false">
            <el-tooltip class="item" effect="dark" :content="item.tip" placement="top">
                <!-- 单选 -->
                <el-select
                    :disabled="formData.id && item.disabled"
                    :multiple="item.multiple"
                    v-if="!item.multiple"
                    v-model="formData[item.key]"
                    :placeholder="item.placeholder || '请选择' + item.label"
                    :multiple-limit="item.limit"
                    :style="{'width':item.width?item.width+'px':'200px'}"
                    class="filter-item"
                    clearable
                >
                    <el-option
                        v-if="item.options"
                        v-for="opt in item.options"
                        :key="opt.key"
                        :label="opt.key"
                        :value="opt.value"
                    />
                    <el-option
                        v-if="item.optionsUrl"
                        v-for="opt in selectData"
                        :key="opt.id"
                        :label="opt[item.optLabel]"
                        :value="opt[item.optValue]"
                    />
                </el-select>
                <!-- 多选 -->
                <el-select
                    :disabled="formData.id && item.disabled"
                    :multiple="item.multiple"
                    v-if="item.multiple"
                    v-model="modelData"
                    :placeholder="item.placeholder || '请选择' + item.label"
                    :multiple-limit="item.limit"
                    :style="{'width':item.width?item.width+'px':'200px'}"
                    class="filter-item"
                    clearable
                    @change="selectChange"
                >
                    <el-option
                        v-if="item.options"
                        v-for="opt in item.options"
                        :key="opt.key"
                        :label="opt.key"
                        :value="opt.value"
                    />
                    <el-option
                        v-if="item.optionsUrl"
                        v-for="opt in selectData"
                        :key="opt.id"
                        :label="opt[item.optLabel]"
                        :value="opt[item.optValue]"
                    />
                </el-select>
            </el-tooltip>
        </template>
        <template v-else>
            <!-- 单选 -->
            <el-select
                :disabled="formData.id && item.disabled"
                :multiple="item.multiple"
                v-if="!item.multiple"
                v-model="formData[item.key]"
                :placeholder="item.placeholder || '请选择' + item.label"
                :multiple-limit="item.limit"
                :style="{'width':item.width?item.width+'px':'100%'}"
                class="filter-item"
                clearable
            >
                <el-option
                    v-if="item.options"
                    v-for="opt in item.options"
                    :key="opt.key"
                    :label="opt.key"
                    :value="opt.value"
                />
                <el-option
                    v-if="item.optionsUrl"
                    v-for="opt in selectData"
                    :key="opt.id"
                    :label="opt[item.optLabel]"
                    :value="opt[item.optValue]"
                />
            </el-select>
            <!-- 多选 -->
            <el-select
                :disabled="formData.id && item.disabled"
                :multiple="item.multiple"
                v-if="item.multiple"
                v-model="modelData"
                :placeholder="item.placeholder || '请选择' + item.label"
                :multiple-limit="item.limit"
                :style="{'width':item.width?item.width+'px':'200px'}"
                class="filter-item"
                clearable
                @change="selectChange"
            >
                <el-option
                    v-if="item.options"
                    v-for="opt in item.options"
                    :key="opt.key"
                    :label="opt.key"
                    :value="opt.value"
                />
                <el-option
                    v-if="item.optionsUrl"
                    v-for="opt in selectData"
                    :key="opt.id"
                    :label="opt[item.optLabel]"
                    :value="opt[item.optValue]"
                />
            </el-select>
        </template>
    </div>
</template>

<script>
    export default {
        name: "selectpart",
        props: {
            formData: {
                type: Object,
                default() {
                    return {};
                }
            },
            item: {
                type: Object,
                default() {
                    return {};
                }
            },
            vModel: {
                // type: Array,
                // default() {
                //   return [];
                // }
            }
        },
        data() {
            return {
                selectData: [],
                modelData: [],
                simTypeBol: false
            };
        },
        created() {
            if (this.item.optionsUrl) {
                setTimeout(() => {
                    this.getSelectData(this.item.optionsUrl.url || this.item.optionsUrl);
                }, 800);
            }
        },
        watch: {
            vModel(newValue) {
                if (newValue) {
                    this.modelData = this.vModel;
                }
            },
            formData(newValue) {
                if (newValue) {
                    if (typeof this.formData[this.item.key] == "string") {
                        this.simTypeBol = true;
                    } else {
                        this.simTypeBol = false;
                    }
                }
            }
        },
        methods: {
            getSelectData(e) {
                if (e) {
                    e(this.item.optionsUrl.params || "").then(({ data }) => {
                        if (this.item.multiple || this.simTypeBol) {
                            if (data.records) {
                                data.data.records.forEach(e => {
                                    e.id = e.id + "";
                                });
                            } else if (data) {
                                data.data.forEach(e => {
                                    e.id = e.id + "";
                                    // e.level = e.level + "";
                                });
                            }
                        }
                        this.selectData = data.records || data;
                    });
                }
            },
            selectChange() {
                if (this.modelData.length > 0) {
                    this.$emit("selectChange", this.modelData);
                }
            }
        }
    };
</script>
<style scoped>
</style>
